/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="container">
			<view class="navbar">
				<block v-for="(item,index) in navTab" :key="index">
					<view class="navbar-box">
						<view @tap="changeTab" :class="[navindex==item.id?'navbar-item-on':'']" :data-current="item.id" >{{item.item}} </view>
					</view>
				</block>
				
			</view>
			<view class="top-box">
				<view class="account-item title">描述</view>
				<view class="account-item title">余额增减</view>
				<view class="account-item title">时间</view>
			</view>
			<block v-for="(item,index) in accountList" :key="index" >
				<view class="account-box">
					<view class="account-item">{{item.desc}}</view>
					<view class="account-item price" >{{item.user_money}}</view>
					
					<view class="account-item time">{{item.change_time}}</view>
				</view>
				
			</block>
		</view>
	</view>
</template>

<script>
	import common from "@/common/common.js";
	import {getAccount} from "@/api/api.js";
	import {mapState} from "vuex";
	export default {
		data() {
			return {
				loginInfo:"",
				navindex:0,
				navTab:[
					{item:"全部",id:0},
					{item:"赚取",id:1},
					{item:"消费",id:2}
				],
				accountList:"",//明细列表
				params:{
					
					size:10,
				},
				total:"",//数据总数
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onShow(){
			
			// this.params.prom_type=6;
			if(this.hasLogin){
				
				this.getAccount(this.params)
			}else{
				common.toast("none","请登录",2000)
				
			}
		},
		methods:{
			getAccount(params){
				getAccount(params).then(res=>{
					console.log(res)
					res.records.forEach((i,index)=>{
						console.log(i)
						var time=common.format(i.change_time,'yyyy-MM-dd hh:mm')
						i.change_time=time
					})
					this.accountList=res.records;
					this.total=res.total;
				})
			},
			onReachBottom(){//下拉加载数据
				
				if(this.accountList.length===this.total){
					
					common.toast("none","加载完了",2000)
					 return false;
				}
				this.params.size+=9;
				if(this.hasLogin){
					this.getAccount(this.params)
				}
				
				
			},
			/*切换*/
			changeTab(e){
				let index=e.currentTarget.dataset.current;
				this.navindex=index;
				if(this.navindex==1){ //赚取
					this.params.is_increase=1;
				}
				if(this.navindex==2){//消费
					this.params.is_increase=0;
				}
				if(this.navindex==0){//全部
					delete this.params.is_increase;
				}
				this.params.size=10;
				this.getAccount(this.params)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.container {
		padding: 20rpx 20rpx;
	}

	.navbar {
		width: 100%;
	}

	.navbar-box {
		font-size: 30rpx;
		display: inline-block;
		width: 33.333333%;
		box-sizing: border-box;
		text-align: center;
		line-height: 85rpx;
	}

	.navbar-item-on {
		font-size: 35rpx;
		font-weight: bold;
		position: relative;
		color: #ff3b3b;
	}

	.navbar-item-on:after {
		content: '';
		position: absolute;
		width: 40rpx;
		height: 8rpx;
		background: linear-gradient(90deg, rgba(255, 59, 59, 1) 0%, rgba(255, 115, 61, 1) 100%);
		border-radius: 4rpx;
		left: 50%;
		margin-left: -20rpx;
		bottom: 0rpx;
	}

	.top-box {
		background: #F0F0F0;
		font-size: 26rpx;
		color: #666666;
		width: 100%;
		padding: 20rpx 0;
		margin-top: 30rpx;
		border-radius: 10rpx;
	}

	.account-box {
		width: 100%;
		font-size: 28rpx;
		padding: 20rpx 0;
		border-radius: 10rpx;
	}

	.account-box:nth-child(odd) {
		background: #fff;
	}

	.account-box:nth-child(even) {
		background: #FAFAFA;
	}

	.account-item {
		display: inline-block;
		width: 33.333333%;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		color: #666;
	}

	.account-box .cont {
		color: #808080;
	}

	.account-box .price {
		color: #808080;
		text-align: center;
	}

	.account-box .time {
		color: #808080;
	}

	.account-box .title {
		text-align: center;
	}
</style>
